<!-- 专属指标管理 -->
<template>
	<div style="min-height: 600px">
		<!-- 搜索表单 -->
		<yd-form ref="myForm" class="yd-form-wraper" :options="formOptions" :model="searchFormData" @form-init="formInited" @search="formInited">
			<template #form-btn>
				<el-form-item label="标识属性">
					<custom-select ref="customSelectRef" :config="{ placeholder: '请设置标识属性', val: '标识属性' }">
						<div>
							<el-table
								ref="effectAttrTable"
								size="small"
								height="270px"
								style="width: 1000px"
								:data="effectAttrTableData"
								@selection-change="selectionEffectAttr"
							>
								<el-table-column align="center" type="selection" min-width="5%"></el-table-column>
								<el-table-column align="left" prop="attrName" label="属性名" min-width="35%"></el-table-column>
								<el-table-column align="left" prop="" label="条件值" min-width="55%">
									<template #default="scope">
										<div v-if="scope.row.field !== 'relevanceType' && scope.row.field !== 'decodeType'">
											<el-radio v-model="scope.row.val" :label="1">是</el-radio>
											<el-radio v-model="scope.row.val" :label="0">否</el-radio>
										</div>
										<div v-else-if="scope.row.field == 'relevanceType'">
											<!-- <el-radio  :label="option.value"> {{ option.label }} </el-radio> -->
											<el-radio-group v-model="scope.row.val">
												<el-radio v-for="(option, index) in options.relevanceEffectOptions" :key="index" :label="option.value">
													{{ option.label }}
												</el-radio>
											</el-radio-group>
										</div>
										<div v-else-if="scope.row.field == 'decodeType'" v-for="(option, index) in options.decodeEffectOptions" :key="index + 1">
											<el-radio v-model="scope.row.val" :label="option.value" style="margin-right: 10px"> {{ option.label }} </el-radio>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<!-- <hr /> -->
							<div style="text-align: center; padding: 10px 0; background-color: rgb(48, 85, 124)">
								<el-button type="primary" size="small" @click="customSelectRef.hideCustom()">关闭</el-button>
							</div>
						</div>
					</custom-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				</el-form-item>
				<div style="z-index: 1">
					<div class="effect-attr-selects" v-for="(option1, index) in currentEffectSelects" :key="index">
						<div v-if="option1.field != 'relevanceType' && option1.field != 'decodeType'">
							<div>
								<div style="float: left; line-height: 34px">{{ option1.attrName }}：</div>
								<div style="float: left">
									<el-radio v-model="option1.val" :label="1">是</el-radio>
									<el-radio v-model="option1.val" :label="0">否</el-radio>
								</div>
							</div>
						</div>
						<div v-else-if="option1.field == 'relevanceType'">
							<div style="float: left; line-height: 34px">{{ option1.attrName }}：</div>
							<div v-for="(option, index) in options.relevanceEffectOptions" :key="index" style="float: left">
								<el-radio v-model="option1.val" :label="option.value"> {{ option.label }} </el-radio>
							</div>
						</div>
						<div v-else-if="option1.field == 'decodeType'">
							<div style="float: left; line-height: 34px">{{ option1.attrName }}：</div>
							<div v-for="(option, index) in options.decodeEffectOptions" :key="index + 1" style="float: left">
								<el-radio v-model="option1.val" :label="option.value"> {{ option.label }} </el-radio>
							</div>
						</div>
					</div>
				</div>
			</template>
		</yd-form>

		<!-- 数据列表 -->
		<YdTable
			:formData="searchFormData"
			:tableConfig="tableConfig"
			:tableData="tableData.data"
			@sizeChangeHandler="searchHandler"
			@currentChangeHandler="handlerQuery(queryFilter)"
			@sortChangeHandler="handlerQuery(queryFilter)"
			@selectionChangeHandler="handlerSelectionChange"
		>
		</YdTable>

		<!-- 添加或修改对话框 -->
		<el-dialog :title="dialog.addOrUpdate.title" v-model="dialog.addOrUpdate.open" width="1000px" append-to-body center>
			<el-form ref="addOrUpdateForm" :model="dialog.addOrUpdate.form" :rules="dialog.addOrUpdate.rule" label-width="150px">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="服务资源编码" prop="resourceCode">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.resourceCode" disabled>
								<template #append>
									<el-button @click="selectResource" icon="Tickets"></el-button>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="服务资源匹配串" prop="identifyStr">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.identifyStr" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="标志名称" prop="name">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.name" placeholder="请输入标志名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="来源" prop="source">
							<el-select v-model="dialog.addOrUpdate.form.source" placeholder="请选择来源" style="width: 100%">
								<el-option v-for="(option, index) in options.sourceOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="关键字" prop="keyword">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.keyword" placeholder="请输入关键字"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="值类型" prop="keywordType">
							<el-select v-model="dialog.addOrUpdate.form.keywordType" placeholder="请选择值类型" style="width: 100%">
								<el-option v-for="(option, index) in options.valTypeOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="匹配符" prop="matchRegular">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.matchRegular" placeholder="请输入匹配符"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="格式化串" prop="formatStr">
							<el-input maxlength="50" v-model="dialog.addOrUpdate.form.formatStr" placeholder="请输入格式化串"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否全量提取" prop="isFullExtraction">
							<el-radio-group v-model="dialog.addOrUpdate.form.isFullExtraction">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否保留原始数据" prop="isRetainOri">
							<el-radio-group v-model="dialog.addOrUpdate.form.isRetainOri">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否显示" prop="isShow">
							<el-radio-group v-model="dialog.addOrUpdate.form.isShow">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否交易标识" prop="isDeal">
							<el-radio-group v-model="dialog.addOrUpdate.form.isDeal">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否用户标识" prop="isUserFlag">
							<el-radio-group v-model="dialog.addOrUpdate.form.isUserFlag">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否渠道得到标识" prop="isChannel">
							<el-radio-group v-model="dialog.addOrUpdate.form.isChannel">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否区域标识" prop="isRegion">
							<el-radio-group v-model="dialog.addOrUpdate.form.isRegion">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否自定义返回码" prop="isCustomReqCode">
							<el-radio-group v-model="dialog.addOrUpdate.form.isCustomReqCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否营业厅" prop="isBusinessHallCode">
							<el-radio-group v-model="dialog.addOrUpdate.form.isBusinessHallCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否工号" prop="isOperatorCode">
							<el-radio-group v-model="dialog.addOrUpdate.form.isOperatorCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否手机号码" prop="isPhoneNumber">
							<el-radio-group v-model="dialog.addOrUpdate.form.isPhoneNumber">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否告警提示语" prop="isAlarm">
							<el-radio-group v-model="dialog.addOrUpdate.form.isAlarm">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否需要通过用户关联信息回填" prop="isBackFill">
							<el-radio-group v-model="dialog.addOrUpdate.form.isBackFill">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否关联指标" prop="relevanceType">
							<el-radio-group v-model="dialog.addOrUpdate.form.relevanceType">
								<el-radio-button v-for="(option, index) in options.relevanceEffectOptions" :key="index" :label="option.value">
									{{ option.label }}
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否解码" prop="decodeType">
							<el-radio-group v-model="dialog.addOrUpdate.form.decodeType">
								<el-radio-button v-for="(option, index) in options.decodeEffectOptions" :key="index" :label="option.value">
									{{ option.label }}
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否敏感信息" prop="isSensitiveInformation">
							<el-radio-group v-model="dialog.addOrUpdate.form.isSensitiveInformation" @change="sensitiveOptionChange">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-show="showSensitiveConfig">
						<el-form-item label="脱敏长度" prop="sensitiveLength">
							<el-input-number v-model="dialog.addOrUpdate.form.sensitiveLength" :precision="0" :min="1" :max="99999"> </el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-show="showSensitiveConfig">
						<el-form-item label="脱敏开始数值" prop="sensitiveStartValue">
							<el-input-number v-model="dialog.addOrUpdate.form.sensitiveStartValue" :precision="0" :min="1" :max="99999"> </el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-show="showSensitiveConfig">
					<el-col :span="8">
						<el-form-item label="展示是否脱敏" prop="isShowSensitive">
							<el-radio-group v-model="dialog.addOrUpdate.form.isShowSensitive">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="导出是否脱敏" prop="isExportSensitive">
							<el-radio-group v-model="dialog.addOrUpdate.form.isExportSensitive">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div>
				<sys-busi-step-seg-relation ref="sysBusiStepSegRelationRef" :resourceCode="cascaderResourceCode"></sys-busi-step-seg-relation>
			</div>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="handlerSubmit" :loading="dialog.addOrUpdate.btnLoading">确 定</el-button>
				<el-button @click="closeAddOrUpdateDialog">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 选择业务服务资源弹出层 -->
		<select-server-resource ref="selectServerResourceRef"></select-server-resource>

		<!-- 批量修改专属指标配置 -->
		<el-dialog :title="dialog.updateBatch.title" v-model="dialog.updateBatch.open" width="1000px" append-to-body center>
			<el-form ref="updateBatchForm" :model="dialog.updateBatch.form" :rules="dialog.updateBatch.rule" size="small" label-width="150px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否全量提取" prop="isFullExtraction">
							<el-radio-group v-model="dialog.updateBatch.form.isFullExtraction">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否保留原始数据" prop="isRetainOri">
							<el-radio-group v-model="dialog.updateBatch.form.isRetainOri">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否显示" prop="isShow">
							<el-radio-group v-model="dialog.updateBatch.form.isShow">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否交易标识" prop="isDeal">
							<el-radio-group v-model="dialog.updateBatch.form.isDeal">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否用户标识" prop="isUserFlag">
							<el-radio-group v-model="dialog.updateBatch.form.isUserFlag">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否渠道标识" prop="isChannel">
							<el-radio-group v-model="dialog.updateBatch.form.isChannel">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否区域标识" prop="isRegion">
							<el-radio-group v-model="dialog.updateBatch.form.isRegion">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否自定义返回码" prop="isCustomReqCode">
							<el-radio-group v-model="dialog.updateBatch.form.isCustomReqCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否营业厅" prop="isBusinessHallCode">
							<el-radio-group v-model="dialog.updateBatch.form.isBusinessHallCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否工号" prop="isOperatorCode">
							<el-radio-group v-model="dialog.updateBatch.form.isOperatorCode">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否手机号码" prop="isPhoneNumber">
							<el-radio-group v-model="dialog.updateBatch.form.isPhoneNumber">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否告警提示语" prop="isAlarm">
							<el-radio-group v-model="dialog.updateBatch.form.isAlarm">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否需要通过用户关联信息回填" prop="isBackFill">
							<el-radio-group v-model="dialog.updateBatch.form.isBackFill">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否关联指标" prop="relevanceType">
							<el-radio-group v-model="dialog.updateBatch.form.relevanceType">
								<el-radio-button v-for="(option, index) in options.relevanceEffectOptions" :key="index" :label="option.value">
									{{ option.label }}
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否解码" prop="decodeType">
							<el-radio-group v-model="dialog.updateBatch.form.decodeType">
								<el-radio-button v-for="(option, index) in options.decodeEffectOptions" :key="index" :label="option.value">
									{{ option.label }}
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否敏感信息" prop="isSensitiveInformation">
							<el-radio-group v-model="dialog.updateBatch.form.isSensitiveInformation" @change="sensitiveOptionChange">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-show="showSensitiveConfig">
						<el-form-item label="脱敏长度" prop="sensitiveLength">
							<el-input-number v-model="dialog.updateBatch.form.sensitiveLength" :precision="0" :min="1" :max="99999"> </el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-show="showSensitiveConfig">
						<el-form-item label="脱敏开始数值" prop="sensitiveStartValue">
							<el-input-number v-model="dialog.updateBatch.form.sensitiveStartValue" :precision="0" :min="1" :max="99999"> </el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-show="showSensitiveConfig">
					<el-col :span="8">
						<el-form-item label="展示是否脱敏" prop="isShowSensitive">
							<el-radio-group v-model="dialog.updateBatch.form.isShowSensitive">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="导出是否脱敏" prop="isExportSensitive">
							<el-radio-group v-model="dialog.updateBatch.form.isExportSensitive">
								<el-radio-button :label="0">否</el-radio-button>
								<el-radio-button :label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="handlerEditBatch" :loading="dialog.updateBatch.btnLoading">确 定</el-button>
				<el-button @click="dialog.updateBatch.open = false">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 专属指标同步弹出层 -->
		<indicator-sync ref="indicatorSyncRef" @closedEvent="indicatorSyncClosed" :key="indicatorSyncKey"> </indicator-sync>

		<!-- 原始数据详情弹出层 -->
		<ori-data-detail ref="oriDataDetailRef"></ori-data-detail>
	</div>
</template>

<script setup name="Management" lang="tsx">
import CustomSelect from '@/components/CustomSelect/index.vue';
import { indicatorManagementOptions } from '@/utils/management/commonOptions';
import { list, add, edit, remove, editBatch } from '@/api/management/IndicatorManage/proprietaryIndicatorManage/manage/index';
import { querySegmentBySystemCode } from '@/api/search/searchOptions';
import SelectServerResource from './selectServerResource.vue';
import SysBusiStepSegRelation from './sysBusiStepSegRelation.vue';
import IndicatorSync from './indicatorSyncDialog.vue';
import OriDataDetail from './originalDataDetail.vue';
import useTagsViewStore from '@/store/modules/tagsView';
import { ref, reactive, onMounted, watch, h } from 'vue';
import { useRoute } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { queryDictByType } from '@/api/search/searchOptions';

const { proxy } = useCurrentInstance();

const route = useRoute();

const customSelectRef = ref();

const selectServerResourceRef = ref();

const addOrUpdateForm = ref();

const myForm = ref();

const updateBatchForm = ref();

const indicatorSyncRef = ref();

// 选项
let options = reactive(indicatorManagementOptions());

console.log('optiopns-------', options);
// 属性标识列表数据
const effectAttrTableData = ref<any[]>([]);
// 当前选择的属性标识
const currentEffectSelects = ref<any[]>([]);
// 搜索表单数据
let searchFormData = reactive<FormModelType>({
	...route.query,
});

// 表单配置
const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		isInitValue: false,
		api: {
			name: 'queryAppSystemOptions',
		},
		cascaders: [
			{
				cascadersParams: 'businessCode',
				api: {
					name: 'queryBusinessOptions',
				},
			},
			{
				cascadersParams: 'segmentTypeId',
				api: {
					name: 'querySegmentTypeBySystemCode',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'businessCode',
		label: '业务名称',
		isInitValue: false,
	},
	{
		type: 'select',
		prop: 'stepCode',
		label: '步骤名称',
		isInitOption: false,
		api: {
			name: 'queryStepOptions',
		},
	},
	{
		type: 'select',
		prop: 'segmentTypeId',
		label: '端类型',
		selectKey: 'id',
	},
	{
		type: 'select',
		prop: 'segmentId',
		label: '网端名称',
		isInitOption: false,
		api: {
			name: 'querySegmentOptionsBySegmentType',
		},
	},
	{
		type: 'input',
		prop: 'resourceCode',
		label: '服务资源编码',
	},
	{
		type: 'input',
		prop: 'identifyStr',
		label: '服务资源匹配串',
	},
	{
		type: 'input',
		prop: 'name',
		label: '标识名称',
	},
	{
		type: 'input',
		prop: 'parentResourceCode',
		label: '父服务资源编码',
	},
]);

// 列表配置
let tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '服务资源编码',
			prop: 'resourceCode',
			width: 180,
			fixed: 'left',
			render: (row, val) => {
				if (proxy.checkPermi(['indicator:management:detail'])) {
					return (
						<router-link to={'/management/indicatorManage/proprietaryIndicatorManage/detail?resourceCode=' + val} class="link-type">
							<span>{val}</span>
						</router-link>
					);
				}
				return <span>{val}</span>;
			},
		},
		{
			label: '父服务资源编码',
			prop: 'parentResourceCode',
			width: 180,
			showOverFlowToolTip: true,
			fixed: 'left',
			render: (row, val) => {
				if (proxy.checkPermi(['indicator:management:detail'])) {
					return (
						<router-link to={'/management/indicatorManage/proprietaryIndicatorManage/detail?resourceCode=' + val} class="link-type">
							<span>{val}</span>
						</router-link>
					);
				}
				return <span>{val}</span>;
			},
		},
		{
			label: '服务资源匹配串',
			prop: 'identifyStr',
			width: 200,
			showOverFlowToolTip: true,
			fixed: 'left',
		},
		{
			label: '标识名称',
			prop: 'name',
			width: 120,
			showOverFlowToolTip: true,
			fixed: 'left',
		},
		{
			label: '最后同步时间',
			prop: 'synTime',
			width: 160,
			sortable: true,
			showOverFlowToolTip: true,
			fixed: 'left',
		},
		{
			label: '最后修改时间',
			prop: 'updateTime',
			width: 160,
			sortable: true,
			showOverFlowToolTip: true,
			fixed: 'left',
		},
		{
			label: '显示',
			prop: 'isShow',
			width: 60,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '交易标识',
			prop: 'isDeal',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '用户标识',
			prop: 'isUserFlag',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '渠道标识',
			prop: 'isChannel',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '区域标识',
			prop: 'isRegion',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '自定义返回码',
			prop: 'isCustomReqCode',
			width: 120,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '营业厅标识',
			prop: 'isBusinessHallCode',
			width: 100,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '工号',
			prop: 'isOperatorCode',
			width: 60,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '手机号',
			prop: 'isPhoneNumber',
			width: 80,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '告警提示',
			prop: 'isAlarm',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '需要通过用户关联信息回填',
			prop: 'isBackFill',
			width: 200,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '脱敏',
			prop: 'isSensitiveInformation',
			width: 60,
			render: (row: any) => {
				// console.log("options.effectValOptionsMap",options.effectValOptionsMap)
				const valStr = options.effectValOptionsMap[row.isSensitiveInformation];
				if (row.isSensitiveInformation === 1) {
					const isShowSensitiveStr = row.isShowSensitive == 1 ? '是' : '否';
					const isExportSensitiveStr = row.isExportSensitive == 1 ? '是' : '否';
					// console.log('isShowSensitiveSt', isShowSensitiveStr);
					let str = h(() => {
						return (
							<div>{valStr}</div>
							// <el-tooltip effect="dark" placement="top">
							// 	<div>{valStr}</div>
							// 	<template v-slot:content>
							// 		脱敏长度：{row.sensitiveLength}
							// 		<br />
							// 		脱敏开始数值：{row.sensitiveStartValue}
							// 		<br />
							// 		展示是否脱敏：{isShowSensitiveStr}
							// 		<br />
							// 		导出是否脱敏：{isExportSensitiveStr}
							// 	</template>
							// </el-tooltip>
						);
					});
				}
				return <div>{valStr}</div>;
			},
		},
		{
			label: '关联指标',
			prop: 'relevanceType',
			width: 120,
			formatter: (row: any, val: any) => {
				// return formatterFn(val);
				let res = options.relevanceEffectOptions.find((item: any) => item.value === val);
				if (res) {
					return res.label;
				}
				return '-';
			},
		},
		{
			label: '解码',
			prop: 'decodeType',
			width: 120,
			formatter: (row: any, val: any) => {
				// return formatterFn(val);
				let res = options.decodeEffectOptions.find((item: any) => item.value === Number(val));
				if (res) {
					return res.label;
				}
				return '-';
			},
		},
		{
			label: '保留原始数据',
			prop: 'isRetainOri',
			width: 120,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '全量提取',
			prop: 'isFullExtraction',
			width: 90,
			formatter: (row: any, val: any) => {
				return formatterFn(val);
			},
		},
		{
			label: '原始数据条数',
			prop: 'oriCount',
			width: 110,
			operation: [
				{
					text: undefined,
					rowKey: 'oriCount',
					handler: (scope) => {
						proxy.$refs.oriDataDetailRef.openDialog(scope.row.resourceCode);
					},
				},
			],
		},
	],
	// 工具栏
	toolBar: [
		{ name: '新增', icon: 'yd-icon-plus', permi: ['indicator:management:add'], handler: () => handleClickAdd() },
		{ name: '修改', icon: 'yd-icon-edit', disable: 'single', permi: ['indicator:management:edit'], handler: () => handlerEdit() },
		{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', permi: ['indicator:management:delete'], handler: () => handlerDelete() },
		{
			name: '批量修改',
			icon: 'yd-icon-edit-batch',
			disable: 'multiple',
			permi: ['indicator:management:editBatch'],
			handler: () => handlerEditBatch(),
		},
		{ name: '同步', icon: 'yd-icon-sync', disable: 'multiple', permi: ['indicator:management:sync'], handler: () => handlerSync() },
	],
	// 序号列左固定
	indexColumnFixed: 'left',
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		orderByColumn: 'synTime',
		isAsc: 'desc',
	},
	// 加载层
	loading: false,
});
// 列表数据
let tableData = reactive({
	data: [],
});
// 是否显示脱敏配置
const showSensitiveConfig = ref(false);
// 联动业务服务资源
const cascaderResourceCode = ref('');
// 专属指标同步组件key
const indicatorSyncKey = ref(0);
// 是否显示网端选项
const showSegmentOptionFlag = ref(false);
// 选择的行数据ids
const selectedIds = ref();
// 选择的行数据
const selected = ref();
// 标识属性对象
const effectObj = ref();
let dialog = reactive<anyObj>({
	addOrUpdate: {
		// 打开状态
		open: false,
		// 标题
		title: '',
		// 表单数据
		form: {},
		// 按钮加载中状态
		btnLoading: false,
		// 表单校验规则
		rule: {
			resourceCode: [{ required: true, message: '服务资源编码不能为空', trigger: 'blur' }],
			name: [{ required: true, message: '标志名称不能为空', trigger: 'blur' }],
			source: [{ required: true, message: '来源必选', trigger: 'change' }],
			keywordType: [{ required: true, message: '值类型必选', trigger: 'change' }],
			matchRegular: [{ required: true, message: '匹配符不能为空', trigger: 'change' }],
		},
	},
	// 设置批量修改专属指标弹出层
	updateBatch: {
		// 打开状态
		open: false,
		// 标题
		title: '批量修改专属指标',
		// 表单数据
		form: {},
		// 表单校验规则
		rule: {},
		// 按钮加载中状态
		btnLoading: false,
	},
});

// 设置步骤的option
watch(
	() => searchFormData.businessCode,
	(newval) => {
		if (newval && newval !== '') {
			myForm.value?.setOptions('stepCode', {
				businessCode: newval,
				systemId: searchFormData.systemId,
			});
		} else {
			searchFormData.stepCode = '';
			myForm.value?.clearValue('stepCode');
		}
	},
	{ deep: true }
);

// 设置网端的option
watch(
	() => searchFormData.segmentTypeId,
	(newval) => {
		if (newval && newval !== '') {
			let params = {
				systemId: searchFormData.systemId,
				type: newval,
			};
			console.log('myForm.value', myForm.value);
			myForm.value?.setOptions('segmentId', params);
		} else {
			searchFormData.segmentId = '';
			myForm.value?.clearValue('segmentId');
		}
	},
	{ deep: true }
);

onMounted(() => {
	// handlerQuery(queryFilter);
});

function formInited() {
	searchHandler();
}

function searchHandler() {
	tableConfig.pagination!.pageNum = 1;
	handlerQuery(queryFilter);
}

function formatterFn(val: any) {
	if (val === 0) {
		return '否';
	} else if (val === 1) {
		return '是';
	} else {
		return '-';
	}
}
/**
 * 关闭新增或修改弹出层
 */
function closeAddOrUpdateDialog() {
	dialog.addOrUpdate.open = false;
}
// 点击添加按钮打开弹框
function handleClickAdd() {
	// 表单重置
	dialog.addOrUpdate.form = {
		isFullExtraction: 0,
		isRetainOri: 0,
		isShow: 0,
		isDeal: 0,
		isUserFlag: 0,
		isChannel: 0,
		isRegion: 0,
		isCustomReqCode: 0,
		isBusinessHallCode: 0,
		isOperatorCode: 0,
		isPhoneNumber: 0,
		isAlarm: 0,
		isBackFill: 0,
		relevanceType: 0,
		decodeType: 0,
		isSensitiveInformation: 0,
		sensitiveLength: 1,
		sensitiveStartValue: 1,
		isShowSensitive: 0,
		isExportSensitive: 0,
	};
	// 重置是否显示脱敏配置
	showSensitiveConfig.value = false;
	// 清空联动列表数据
	cascaderResourceCode.value = '';
	// 标题
	dialog.addOrUpdate.title = '新增';
	// 打开窗口
	dialog.addOrUpdate.open = true;
}
/**
 * 选择行数据
 */
function handlerSelectionChange(selects: any) {
	selectedIds.value = selects.map((item: anyObj) => item.id);
	selected.value = selects;
}
/**
 * 搜索
 */
function handlerQuery(filter: any) {
	if (typeof filter === 'function' && !filter()) {
		return;
	}
	tableConfig.loading = true;
	tableData.data = [];
	list({ ...searchFormData, ...effectObj.value }).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		if (res.data !== null) {
			tableData.data = res.data.records;
			tableConfig.pagination!.total = res.data.total;
		}
	});
}
/**
 * 表单提交
 */
function handlerSubmit() {
	if (dialog.addOrUpdate.title === '新增') {
		handlerAdd();
	} else {
		handlerEdit();
	}
}
/**
 * 删除
 */
function handlerDelete() {
	proxy.$modal
		.confirm('是否确认删除所选项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			// 调用接口
			return remove(selectedIds.value);
		})
		.then(() => {
			// 刷新列表 计算是否要查询上一页的数据
			if (tableConfig.pagination!.total && searchFormData.pageSize) {
				// 删除后的总条数
				let totalCount = tableConfig.pagination!.total - selectedIds.value.length;
				// 计算删除后的总页数
				let totalPage = Math.ceil(totalCount / searchFormData.pageSize);
				// 如果删除后的总页数小于1, 置为1
				totalPage = totalPage < 1 ? 1 : totalPage;
				// 判断删除前的页数是否大于删除后的总页数, 计算当前页应该是多少赋值给查询表单
				searchFormData.pageNum = searchFormData.pageNum! > totalPage ? totalPage : searchFormData.pageNum;
			} else {
				searchFormData.pageNum = 1;
			}
			handlerQuery(queryFilter);
			// 提示
			proxy.$modal.msgSuccess('删除成功！');
		});
}

// 点击网端类型
function segmentTypeClick(val: any) {
	if (val === undefined || val === null || val === '') {
		searchFormData.segmentId = undefined;
		showSegmentOptionFlag.value = false;
		return;
	}
	querySegmentBySystemCode(searchFormData.systemId).then((res: ApiResponse) => {
		const arr = res.data.filter((r: any) => r.code == val);
		showSegmentOptionFlag.value = true;
		proxy.$refs.segmentItemRef.setOptions(arr);
	});
}
// 查询过滤器
function queryFilter() {
	// 关闭标识属性下拉框
	customSelectRef.value.hideCustom();
	// 设置查询值
	const effectList = JSON.parse(JSON.stringify(currentEffectSelects.value));
	// 先清空
	effectObj.value = {};
	effectList.forEach((effect: any) => {
		effectObj.value[effect.field] = effect.val;
	});
	return true;
}
// 新增
function handlerAdd() {
	// 校验参数
	addOrUpdateForm.value?.validate((valid: any) => {
		if (!valid) {
			return;
		}
		// 设置标识属性
		const f = dialog.addOrUpdate.form;
		// 是否显示
		// dialog.addOrUpdate.form.isShow = f.show === 1 ? '1' : '0';
		// 是否交易标识
		// dialog.addOrUpdate.form.isTransIds = f.isDeal === 1 ? '1' : '0';
		// 是否关联指标
		// dialog.addOrUpdate.form.relevanceType = f.relevanceType;
		// dialog.addOrUpdate.form.effectAttrMap = {
		// 	isShow: f.isShow,
		// 	isDeal: f.isDeal,
		// 	isUserFlag: f.isUserFlag,
		// 	isChannel: f.isChannel,
		// 	isRegion: f.isRegion,
		// 	isCustomReqCode: f.isCustomReqCode,
		// 	isBusinessHallCode: f.isBusinessHallCode,
		// 	isOperatorCode: f.isOperatorCode,
		// 	isPhoneNumber: f.isPhoneNumber,
		// 	isAlarm: f.isAlarm,
		// 	isBackFill: f.isBackFill,
		// 	relevanceType: f.relevanceType,
		// 	decodeType: f.decode,
		// };
		// 调用接口
		dialog.addOrUpdate.btnLoading = true;
		add(dialog.addOrUpdate.form).then((res: ApiResponse) => {
			dialog.addOrUpdate.btnLoading = false;
			if (res.code !== 0) {
				proxy.$modal.msgError(res.msg);
				return;
			}
			// 关闭弹出层
			closeAddOrUpdateDialog();
			// 刷新列表
			searchFormData.pageNum = 1;
			handlerQuery(queryFilter);
			// 提示
			proxy.$modal.msgSuccess('新增成功！');
		});
	});
}
// 修改
function handlerEdit() {
	// 打开窗口
	if (!dialog.addOrUpdate.open) {
		// 数据回显，数据需要拷贝一下
		const d = JSON.parse(JSON.stringify(selected.value[0]));
		dialog.addOrUpdate.form = {
			// ...d.effectAttrMap,
			...d,
		};
		// 回显是否显示脱敏配置
		showSensitiveConfig.value = dialog.addOrUpdate.form.isSensitiveInformation === 1;
		// 联动查询业务服务资源关联信息列表
		cascaderResourceCode.value = dialog.addOrUpdate.form.resourceCode;
		// 标题
		dialog.addOrUpdate.title = '修改';
		// 打开窗口
		dialog.addOrUpdate.open = true;
		return;
	}
	// 设置标识属性
	const f = dialog.addOrUpdate.form;
	// 是否显示
	// dialog.addOrUpdate.form.isShow = f.isShow === 1 ? '1' : '0';
	// 是否交易标识
	// dialog.addOrUpdate.form.isTransIds = f.isDeal === 1 ? '1' : '0';
	// 是否关联指标
	dialog.addOrUpdate.form.relevanceType = f.relevanceType;
	// dialog.addOrUpdate.form.effectAttrMap = {
	// 	isShow: f.isShow,
	// 	isDeal: f.isDeal,
	// 	isUserFlag: f.isUserFlag,
	// 	isChannel: f.isChannel,
	// 	isRegion: f.isRegion,
	// 	isCustomReqCode: f.isCustomReqCode,
	// 	isBusinessHallCode: f.isBusinessHallCode,
	// 	isOperatorCode: f.isOperatorCode,
	// 	isPhoneNumber: f.isPhoneNumber,
	// 	isAlarm: f.isAlarm,
	// 	isBackFill: f.isBackFill,
	// 	relevanceType: f.relevanceType,
	// 	decodeType: f.decodeType,
	// };
	// 校验参数
	addOrUpdateForm.value.validate((valid: any) => {
		if (!valid) {
			return;
		}
		// 调用接口
		dialog.addOrUpdate.btnDisabled = true;
		edit(dialog.addOrUpdate.form).then((res: ApiResponse) => {
			dialog.addOrUpdate.btnDisabled = false;
			if (res.code !== 0) {
				proxy.$modal.msgError(res.msg);
				return;
			}
			// 关闭弹出层
			closeAddOrUpdateDialog();
			// 刷新列表
			searchFormData.pageNum = 1;
			handlerQuery(queryFilter);
			// 提示
			proxy.$modal.msgSuccess('修改成功！');
		});
	});
}
// 选择标识属性
function selectionEffectAttr(selects: any) {
	currentEffectSelects.value = selects;
}
// 选择业务服务资源
function selectResource() {
	selectServerResourceRef.value?.openDialog(() => {
		const selected = selectServerResourceRef.value?.getSelectServerResource();
		dialog.addOrUpdate.form.resourceCode = selected.resourceCode;
		dialog.addOrUpdate.form.identifyStr = selected.identifyStr;
		// 联动查询业务服务资源关联信息列表
		cascaderResourceCode.value = selected.resourceCode;
	});
}
// 批量修改
function handlerEditBatch() {
	// 判断窗口是否打开
	if (!dialog.updateBatch.open) {
		// 表单重置
		dialog.updateBatch.form = {
			isFullExtraction: 0,
			isRetainOri: 0,
			isShow: 0,
			isDeal: 0,
			isUserFlag: 0,
			isChannel: 0,
			isRegion: 0,
			isCustomReqCode: 0,
			isBusinessHallCode: 0,
			isOperatorCode: 0,
			isPhoneNumber: 0,
			isAlarm: 0,
			isBackFill: 0,
			relevanceType: 0,
			decodeType: 0,
			isSensitiveInformation: 0,
			sensitiveLength: 1,
			sensitiveStartValue: 1,
			isShowSensitive: 0,
			isExportSensitive: 0,
		};
		// 重置是否显示脱敏配置
		showSensitiveConfig.value = false;
		// 打开窗口
		dialog.updateBatch.open = true;
		return;
	}
	// 校验参数
	updateBatchForm.value?.validate((valid: any) => {
		if (!valid) {
			return;
		}
		// 设置标识属性
		const f = dialog.updateBatch.form;
		// 是否显示
		// dialog.updateBatch.form.isShow = f.isShow === 1 ? '1' : '0';
		// 是否交易标识
		// dialog.updateBatch.form.isTransIds = f.isDeal === 1 ? '1' : '0';
		// 是否关联指标
		dialog.updateBatch.form.isRelevance = f.relevance;
		// dialog.updateBatch.form.effectAttrMap = {
		// 	isShow: f.isShow,
		// 	isDeal: f.isDeal,
		// 	isUserFlag: f.isUserFlag,
		// 	isChannel: f.isChannel,
		// 	isRegion: f.isRegion,
		// 	isCustomReqCode: f.isCustomReqCode,
		// 	isBusinessHallCode: f.isBusinessHallCode,
		// 	isOperatorCode: f.isOperatorCode,
		// 	isPhoneNumber: f.isPhoneNumber,
		// 	isAlarm: f.isAlarm,
		// 	isBackFill: f.isBackFill,
		// 	relevanceType: f.relevanceType,
		// 	decodeType: f.decodeType,
		// };
		// 批量修改的ids
		dialog.updateBatch.form.ids = selectedIds.value;
		// 调用接口
		dialog.updateBatch.btnDisabled = true;
		editBatch(dialog.updateBatch.form).then((res: ApiResponse) => {
			dialog.updateBatch.btnDisabled = false;
			if (res.code !== 0) {
				proxy.$modal.msgError(res.msg);
				return;
			}
			// 关闭弹出层
			dialog.updateBatch.open = false;
			// 刷新列表
			searchFormData.pageNum = 1;
			handlerQuery(queryFilter);
			// 提示
			proxy.$modal.msgSuccess('修改成功！');
		});
	});
}
// 同步
function handlerSync() {
	// 校验所选专属指标是否属于同一服务资源
	const arr = Array.from(new Set(selected.value.map((item: any) => item.resourceCode)));
	if (arr.length > 1) {
		proxy.$modal.alert('所选专属指标不属于同一业务服务资源', '提示');
		return;
	}
	// 打开同步窗口
	console.log(' handlerSync=======', selectedIds.value);
	console.log(' handlerSync=======', arr[0]);
	indicatorSyncRef.value?.openDialog(selectedIds.value, arr[0]);
}
// 同步弹窗关闭回调
function indicatorSyncClosed() {
	indicatorSyncKey.value += 1;
}
// 脱敏配置选项
function sensitiveOptionChange(val: any) {
	if (val === 1) {
		showSensitiveConfig.value = true;
	} else {
		showSensitiveConfig.value = false;
	}
}

// 设置标识属性
queryDictByType('indicator_effect_attr').then((res: ApiResponse) => {
	if (res.code === 0) {
		if (res.data instanceof Array) {
			res.data.forEach((r: any) => {
				effectAttrTableData.value.push({
					field: r.label,
					attrName: r.value,
					val: 1,
					re: '0',
					dec: 0,
				});
			});
		}
	}
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.effect-attr-selects {
	display: inline-block;
	margin: 2px 10px;
	padding: 0 5px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}
:deep(.link-type) {
	text-decoration: underline;
}
</style>
